<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能</title>
    <style>
        *{margin: 0;padding: 0;}
        li{list-style-type: none;}
        a,input{outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
        #choose{display: none;}
        canvas{width: 100%;border: 1px solid #000000;}
        #addImg,#submit{display: block;margin: 10px;height: 60px;text-align: center;line-height: 60px;border: 1px solid;border-radius: 5px;cursor: pointer;}
        .img_list,.imgCompress_list{margin: 10px 5px;}
        .img_list li,.imgCompress_list li{position: relative;display: inline-block;width: 100px;height: 100px;margin: 5px 5px 20px 5px;border: 1px solid rgb(100,149,198);background: #fff no-repeat center;background-size: cover;}
        .progress{position: absolute;width: 100%;height: 20px;line-height: 20px;bottom: 0;left: 0;background-color:rgba(100,149,198,.5);}
        .progress span{display: block;width: 0;height: 100%;background-color:rgb(100,149,198);text-align: center;color: #FFF;font-size: 13px;}
        .size{position: absolute;width: 100%;height: 15px;line-height: 15px;bottom: -18px;text-align: center;font-size: 13px;color: #666;}
        .tips{display: block;text-align:center;font-size: 13px;margin: 10px;color: #999;}
        
/*        .imgBigShow{display: none;width: 400px;height: 400px;position: fixed;z-index: 1;top: 50px;border: 1px solid rgb(100,149,198);background: #fff no-repeat center;background-size: cover;}*/
    </style>
</head>
<body>
	<input type="file" id="choose" capture="camera" accept="image/*" multiple>
    		
    <p>压缩前：</p>
    <ul class="img_list">
        <!--<li style="background-image:url('/public/upload/upload.jpeg')">-->
            <!--<div class="progress"><span style="width: 100%">上传成功</span></div>-->
            <!--<div class="size">100KB</div>-->
        <!--</li>-->
    </ul>

    <a id="addImg">添加图片</a>
    <span class="tips">只允许上传jpg、png</span>

    <p>压缩后：</p>
    <ul class="imgCompress_list">
    	<!--<li style="background-image:url('/public/upload/upload.jpeg')">-->
            <!--<div class="progress"><span style="width: 100%">上传成功</span></div>-->
            <!--<div class="size">100KB</div>-->
        <!--</li>-->
    </ul>

    <div id="submit">提交表单</div>

    <!-- <div class="imgBigShow"></div> -->

    <!-- processImg.js是压缩图片插件，exif.js是矫正图片方向的插件，processImg.js依赖于exif.js，所以exif.js要processImg.js在之前引入 -->
    <script src="src/exif.js"></script>
    <script src="src/processImg.js"></script>
    <!-- 截止 -->
    
    <script type="text/javascript">
        var filechooser = document.getElementById("choose");
        
        //用来存储压缩后的图片二进制数据
        var blobFileList;

        //点击添加图片
        document.getElementById('addImg').onclick = function () {
            filechooser.click();
        }

        //上传图片
        document.getElementById('submit').onclick = function(){
            if(blobFileList){
                blobFileList.forEach(function (blobFile, i) {
                    console.log('正在上传第'+(i+1)+'张图片')
                    formUpData(blobFile);
                })
            }
        }

        //获取压缩后的图片
        function getCompressiveFileList(fileList) {
            blobFileList = fileList;
            // console.log('fileBlobList:', fileList);
            fileList.forEach(function (blob) {
                var reader = new FileReader();
                reader.onload = function () {
                    var li = document.createElement("LI")
                    li.style.backgroundImage = 'url('+this.result+')';
                    document.querySelector('.imgCompress_list').appendChild(li)
                }
                reader.readAsDataURL(blob);
            })
        }
        
        //监听上传组件input的onchange事件，压缩图片，纠正图片方向，同时获取压缩后的图片
        filechooser.onchange = function () {
            var fileList = this.files;

            // console.log('fileList:', fileList);
            
            //预览压缩前的图片
            var files = Array.prototype.slice.call(fileList);
            files.forEach(function (file, i) {
                var reader = new FileReader();
                reader.onload = function () {
                    var li = document.createElement("LI")
                    li.style.backgroundImage = 'url('+this.result+')';
                    document.querySelector('.img_list').appendChild(li)
                }
                reader.readAsDataURL(file);
            });

            //处理图片列表，getCompressiveFileList接受处理后的图片数据列表
            var process = window.lzImgProcess();
            process(fileList, getCompressiveFileList);
        }

        
        //将压缩后的二进制图片数据流append到formdata对象中上传到后台服务器
        //注意：上传的是formdata对象，后台接口接收的时候，也要从formdata对象中读取二进制数据流
        function formUpData(blobFiles){
            var formData = new FormData();

            formData.append("files", blobFiles);
            
            var xhr = new XMLHttpRequest();
            
            //链接你自己上传图片接口即可，这里的接口地址，是我写的示例，不可真实使用，讲解意义更大
            xhr.open('post', 'http://xxx/welcome/index/');

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log('上传成功！');
                }
            };

            xhr.send(formData);
        }
    </script>
</body>
</html>